<template>
  <div>
    <div style="display: inline-flex">
      <n-input
        readonly
        v-model:value="menuTitle"
        style="margin-right: 10px"
        @on-clear="clearSelect"
      />
      <n-popover trigger="click" placement="right">
        <template #trigger>
          <n-button>选择菜单</n-button>
        </template>
        <div slot="content">
          <span style="margin: 10px">选择上级菜单</span>
          <n-input
            v-model:value="searchKey"
            @input="searchMenu"
            placeholder="输入菜单标题搜索"
            clearable
          >
            <template #prefix>
              <n-icon>
                <SearchOutlined />
              </n-icon>
            </template>
          </n-input>
          <div class="dep-tree-bar">
            <n-tree
              block-line
              cascade
              :virtual-scroll="true"
              :data="menuData"
              style="max-height: 650px; overflow: hidden"
              @update:selected-keys="selectedTree"
            />
            <n-spin size="medium" fix v-if="menuLoading" />
          </div>
        </div>
      </n-popover>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, unref, watchEffect } from 'vue';
  import { SearchOutlined } from '@vicons/antd';
  import { querySelectMenu } from '@/api/system/menu';
  import { getTreeItem } from '@/utils';

  export default defineComponent({
    name: 'MenuSelectTree',
    components: {
      SearchOutlined,
    },
    props: {
      title: String,
    },
    setup(props, context) {
      let menuTitle = ref('');
      const searchKey = ref('');
      const menuLoading = ref(true);
      const menuData = ref([]);
      function clearSelect() {
        menuTitle.value = '';
      }
      function selectedTree(keys) {
        if (keys.length) {
          const treeItem = getTreeItem(unref(menuData), keys[0]);
          menuTitle.value = treeItem.label;
          context.emit('changeMenu', treeItem.parentId);
        } else {
          menuTitle.value = '';
        }
      }
      function searchMenu(value) {
        let data = menuData.value;
        let item = findItem(data, value);
        menuData.value = item;
      }
      function findItem(data: any[], label: string): any {
        for (let item of data) {
          if (item.label.indexOf(label) != -1) {
            return new Array(item);
          } else {
            if (item.children && item.children.length) {
              findItem(item.children, label);
            }
          }
        }
      }
      onMounted(async () => {
        let menuDataList = await querySelectMenu({ isLoadButton: 1 });
        menuData.value = menuDataList;
        menuLoading.value = false;
      });
      watchEffect(() => {
        console.log(props.title);
        menuTitle.value = props.title;
      });
      return {
        menuTitle,
        searchKey,
        menuLoading,
        menuData,
        selectedTree,
        clearSelect,
        searchMenu,
      };
    },
  });
</script>

<style scoped></style>
